<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="订单详情"> </mh-header>
      <div class="o-d-top bg-w mh-pd">
        <p class="logistics flex">
          <span v-if="info.status == 10">等待买家付款</span>
          <span v-if="info.status == 12">已出库：预计3-5天后到达</span>
          <span v-if="info.status == 11">等待卖家发货</span>
          <span v-if="info.status == 20">已确认收货</span>
          <span v-if="info.status == 30">已关闭</span>
          <span v-if="info.status == 21">维权中</span>
          <span v-if="info.status == 22">维权成功</span>
          <span v-if="info.status == 23">维权失败</span>
          <span v-if="info.status == 24">已评价</span>
        </p>
        <div class="r-u-info flex">
          <div class="u-info flex">
            <span>收货人：</span>
            <span v-text="info.contacts">用户***</span>
            <span v-text="info.contacts_phone"></span>
            <span v-text="info.address"></span>
          </div>
        </div>
        <p class="wishes">祝福语：<span v-text="info.remarks">-</span></p>
      </div>

      <div class="o-d-m bg-w mh-pd">
        <h4>商品清单</h4>
        <div class="g-info flex">
          <div class="g-info-l">
            <div class="g-pic">
              <img :src="info.image" alt="商品缩略图">
            </div>
          </div>
          <div class="g-info-r">
            <p class="g-name" v-text="info.name">--</p>
            <p class="g-size" v-text="`规格${info.specifications}`">规格</p>
            <p class="flex-bt g-price">
              <span class="price" v-text="`￥${info.goods_price}`">￥-</span>
              <span v-text="`x${info.num}`">1</span>
            </p>
          </div>

        </div>
      </div>

      <div class="o-d-bottom bg-w">
        <ul class="mui-table-view">
          <li class="mui-table-view-cell">商品总价
            <span class="mui-badge mui-badge-inverted" v-text="`￥${info.payment}`">￥-</span>
          </li>
          <li class="mui-table-view-cell">配送方式
            <span class="mui-badge mui-badge-inverted">快递 10元</span>
          </li>
          <li class="mui-table-view-cell">订单总价
            <span class="mui-badge mui-badge-inverted" v-text="`￥${info.payment}`">￥-</span>
          </li>
          <li class="mui-table-view-cell">订单编号：
            <span class="" v-text="info.order_id">-</span>
          </li>
          <li class="mui-table-view-cell">实付款
            <span class="mui-badge mui-badge-danger mui-badge-inverted" v-text="`￥${info.payment}`">￥-</span>
          </li>
          <li class="mui-table-view-cell"></li>
          <li class="mui-table-view-cell flex-bt">
            <span class="sm-tip">*该商品不支持退货哦</span>
            <div class="o-btn-row">
              <button type="button" class="btn-invert" @click='closeOrder'>取消订单</button>
              <button type="button" class="btn-def" @click='toPay'>付款</button>
            </div>
          </li>
        </ul>
      </div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  import {MH_API} from "@/api/api";
  export default {
    name: "order-detail",
    data () {
      return {
        status: 1,
        rePic: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3396400642,3980900114&fm=11&gp=0.jpg',
        reName: '章叁',
        reAge: 23,
        reEdu: '本科',
        wishes: '天天开心',
        goods: {
          goodsPic: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3396400642,3980900114&fm=11&gp=0.jpg',
          goodsName: '德福玫瑰🌹',
          goodsSize: '6支',
          goodsPrice: '28',
          num: 1
        },
        total: 28,
        delivery: 1,
        deliveryFee: 10,
        orderTotal: 38,
        orderNum: '78345087607',
        actualPay: 38,
        info: {},
        id: null
      }
    },
    components: {
      MhHeader
    },
    methods:{
      closeOrder(){
        let self = this;
        MH_API.closeOrder({
          order_id: self.id
        }).then(res => {
          if (res.status === 200) {
            mui.toast("操作成功");
            setTimeout(function(){
              location.reload()
            }, 1000)
          }
          else{
            mui.toast(res.msg)
          }
        })
      },
      toPay(){
        let self = this;
        this.$router.push({
          path: '/pay',
          query: {
            orderId: self.id,
            price: self.info.payment
          }
        })
      }
    },
    created(){
      let id = this.$route.params.id;
      this.id = id;
      let self = this;
      MH_API.getTradeInfo({
        id: id
      }).then(res => {
        if (res.status === 200) {
          self.info = res.data[0];
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .r-u-pic {margin: 0 1rem 0 0;}
  .pic-box {@include mh-avatar-box(2.5rem, 2.5rem);}
  .g-pic {
    margin: 0;
    @include mh-avatar-box(8rem, 8rem);
    border-radius: 0;
  }
  .g-info-r {flex: 1;}
  .logistics {
    span {
      flex: 1;
      padding: 1rem 0;
      border-bottom: 1px solid #eee;
      @include sc(1.4rem, #2381fd);
    }
    &:before {
      display: inline-block;
      margin-right: .5rem;
      content: '';
      width: 1.5rem;
      height: 1.25rem;
      background: url("../../assets/images/ico/ic_p_wl.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .r-u-info {
    span {margin-right: 1rem;}
    &:before {
      display: inline-block;
      margin-right: .5rem;
      content: '';
      width: 1.1rem;
      height: 1.5rem;
      background: url("../../assets/images/ico/ic_p_map.png") no-repeat center center;
      background-size: 100% 100%;
    }
    .u-info {
      flex: 1;
      padding: 1rem 0;
      border-bottom: 1px solid #eee;
      span {
        @include sc(1.4rem, #333);
        font-weight: bold;
      }
    }
  }
  .wishes {
    padding: 1rem 0 0;
    @include sc(1.4rem, #646464);
    span {
      color: #333;
      font-weight: bold;
    }
  }
  .o-d-m {
    margin: 1rem 0;
    &>h4 {
      margin-bottom: 1rem;
      @include sc(1.3rem, #333);
    }
  }
  .g-info-r {
    padding-left: 1rem;
    .g-name {
      margin-bottom: 1rem;
      @include sc(1.5rem, #333);
    }
  }
  .g-size {@include sc(1.2rem, #999);}
  .g-price {
    margin-top: 1rem;
    color: #333;
  }
  .o-d-bottom {
    padding-bottom: 4rem;
    overflow: auto;
  }
  .mui-table-view-cell {
    @include sc(1.4rem, #999);
    .sm-tip {@include sc(1.2rem, #666)}
  }
  .o-btn-row {
    button {
      min-width: 6.8rem;
      padding: .4rem .6rem;
      border-radius: 1.2rem;
    }
    .btn-invert {
      @include sc(1.2rem, #dd65a1);
      border: 1px solid #dd65a1;
    }
    .btn-def {
      @include sc(1.2rem, #fff);
      background-color: #eb537f;
    }
  }

</style>
